import React, { useContext, useMemo } from 'react';
import { SlotScopeContext } from '@/components/SlotView/components/SlotScope';

interface SlotScopeProps {
  name: string;
  children: React.ReactNode;
}

export function SlotScope({ name, children }: SlotScopeProps) {
  const scope = useContext(SlotScopeContext);

  const scopedProps = useMemo(() => {
    return {
      [`slot-scope-${name}`]: scope,
    };
  }, [scope]);

  return <div {...scopedProps}>{children}</div>;
}
